<template>
	<view class="layout">
		<z-paging ref="paging" v-model="wallpaperList" @query="getWallpaperLists">
			<template #refresher="{refresherStatus}">
				<custom-refresh :status="refresherStatus" />
			</template>
			<uni-nav-bar dark :fixed="true" shadow background-color="#59dce8" status-bar left-icon="left" left-text="返回"
				:title="title" @clickLeft="back" />
			<view class="theme">
				<view class="item" v-for="item in wallpaperList" :key="item._id" @click="goDetail(item._id)">
					<image :src="item.picurl.url" mode="aspectFill"></image>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import {
		getWallpaperList
	} from "@/api/wallpaperList.js"
	import {
		ref
	} from "vue";

	const paging = ref({})
	const title = ref("")
	const classId = ref("")
	const wallpaperList = ref([])

	onLoad(async (e) => {
		title.value = e.name;
		classId.value = e.id;
		await getWallpaperLists(1, 12) // 传递默认参数
	});

	// 获取壁纸列表
	const getWallpaperLists = async (pageNo, pageSize) => {
		try {
			const {
				data
			} = await getWallpaperList({
				data: {
					pageNumber: pageNo
				},
				id: classId.value
			});
			paging.value.complete(data)
		} catch (err) {
			paging.value.complete(false);
		}
	};

	const back = () => {
		uni.navigateBack()
	}
	const goDetail = (id) => {
		uni.setStorageSync("storgClassList", wallpaperList.value)
		uni.navigateTo({
			url: "/pages/detail/detail?id=" + id
		})
	}

	//分享给好友
	onShareAppMessage(() => {
		return {
			title: "噜啦壁纸-列表",
			path: '/pages/classList/classList?id=' + classId.value + '&name=' + title.value
		}
	})

	//分享到朋友圈
	onShareTimeline(() => {
		return {
			title: "噜啦壁纸"
		}
	})
</script>

<style lang="scss" scoped>
	.layout {
		.theme {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15rpx;
			margin: 30rpx 20rpx;

			.item {
				position: relative; // 设置为相对定位

				image {
					width: 220rpx;
					height: 400rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>